<template>
  <div>
    <a-modal :visible="skuListvisible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="1200px" top="100px" :mask-closable="false">
      <template #title> 选择SKU </template>
      <div style="overflow: hidden">
        <div style="width: 240px; float: left">
          <a-cascader multiple :max-tag-count="1" :style="{ width: '90%' }" @change="cateGoryChange" check-strictly :options="options" :field-names="{ value: 'id', label: 'name' }" v-model="form.categoryIdList" placeholder="全部类目" allow-clear />
        </div>
        <div style="float: left">
          <a-select v-model="form.keywordType" style="width: 120px">
            <a-option label="SKU" value="sku"></a-option>
            <a-option label="产品名称" value="skuName"></a-option>
          </a-select>
          <a-select v-model="form.searchType" style="width: 80px">
            <a-option label="精确" value="exact"></a-option>
            <a-option label="模糊" value="fuzzy"></a-option>
          </a-select>
          <a-input-search style="width: 240px" @clear="search('data', '3')" @search="search($event, '1')" v-model="form.keyword" plcaeholder="请输入" allow-clear>
            <template #suffix v-if="form.searchType == 'exact'">
              <a-popover position="br" trigger="click" v-model:popup-visible="showPopover">
                <icon-more-vertical style="cursor: pointer; margin-left: 5px" />
                <template #content>
                  <a-textarea placeholder="请输入，一行一个" v-model="form.mulValue" :style="{ width: '200px', height: '200px' }" />
                  <div class="footer" style="overflow: hidden">
                    <div class="fl"> <a-button type="outline" size="mini" @click="form.value = ''">清空</a-button> </div>
                    <div class="fr">
                      <a-button type="outline" size="mini" @click="showPopover = false">取消</a-button>
                      <a-button type="outline" size="mini" style="margin-left: 5px" @click="search($event, '2')">搜索</a-button>
                    </div>
                  </div>
                </template>
              </a-popover>
            </template>
          </a-input-search>

          <a-button style="margin-left: 10px" size="medium" class="gray-outline" @click="reset">重置</a-button>
        </div>
      </div>
      <a-table size="mini" class="table-singe-line" :loading="loading" :row-selection="rowSelection" @selection-change="selectColumn" row-key="id" style="margin-top: 10px" ref="table" :scroll="{ x: '100%', y: '400px' }" :bordered="false" :data="tableData" :pagination="false">
        <template #columns>
          <a-table-column v-for="item of columns" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
            <template v-if="item.title == '图片'" #cell="{ record }">
              <a-image v-if="record.productPicList && record.productPicList[0]" width="40px" height="40px" :src="record.productPicList[0].url"></a-image>
            </template>
            <template v-else-if="item.title == 'SKU'" #cell="{ record }">
              <span>{{ record.sku }}</span>
            </template>
            <template v-else-if="item.title == '产品名称'" #cell="{ record }">
              <a-tooltip :content="record.skuName">
                <div class="table-two">{{ record.skuName }}</div>
              </a-tooltip>
            </template>
            <template v-else-if="item.title == '类目'" #cell="{ record }">
              <span v-if="record.category">{{ record.category.name }}</span>
            </template>
            <template v-else="item.title == '产品开发员'" #cell="{ record }">
              <span v-if="record.developer">{{ record.developer.name }}</span>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <div style="margin-top: 10px; overflow: hidden">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue'
  import { getProductSKUList } from '@/api/product'
  import { Table } from '@arco-design/web-vue'
  export default defineComponent({
    name: 'productSKUList',
    props: ['options'],
    setup(props, { emit }) {
      let skuListvisible = ref(false)
      const table = ref()
      let data = reactive({
        loading: false,
        columns: [
          { title: '图片', width: 80, align: 'left' },
          { title: 'SKU', width: 80, dataIndex: 'SKU', align: 'left' },
          { title: '产品名称', width: 80, align: 'left' },
          { title: '类目', width: 80, align: 'left' },
          { title: '产品开发员', width: 80, align: 'left' },
        ],
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
        selectRow: [],
        pageNation: { pageSize: 20, pageNum: 1, total: 0 },
        tableData: [],
        form: {
          categoryIdList: [],
          keywordType: 'sku',
          searchType: 'exact',
          keyword: '',
          mulValue: '',
        },
        showPopover: false,
      })
      const open = () => {
        getList()
      }

      const selectColumn = (val: any) => {
        data.selectRow = val
      }

      const handleOk = () => {
        let arr: any = []
        data.selectRow.forEach((e) => {
          let obj: any = data.tableData.find((el: any) => e == el.id)
          if (obj) {
            obj.num = 1
            arr.push(obj)
          }
        })

        data.form = {
          categoryIdList: [],
          keywordType: 'sku',
          searchType: 'exact',
          keyword: '',
          mulValue: '',
        }

        emit('save', arr)
        skuListvisible.value = false
        data.selectRow.forEach((e) => {
          table.value.select(e, false)
        })
      }
      const handleCancel = () => {
        skuListvisible.value = false
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const cateGoryChange = () => {
        data.pageNation.pageNum = 1
        getList()
      }

      const search = (item: any, flag: string) => {
        if (flag == '2') {
          data.form.keyword = data.form.mulValue.split('\n').join(',')
          data.showPopover = false
        }
        if (flag == '3') {
          data.form.keyword = ''
          data.form.mulValue = ''
        }
        data.pageNation.pageNum = 1
        getList()
      }

      const getList = async () => {
        let params = {
          ...data.form,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
          productType: 'normal',
        }
        data.loading = true
        const res = await getProductSKUList(params)
        data.pageNation.total = res.data.total
        data.tableData = res.data.records
        data.loading = false
      }

      const reset = () => {
        data.form = {
          categoryIdList: [],
          keywordType: 'sku',
          searchType: 'exact',
          keyword: '',
          mulValue: '',
        }
        getList()
      }

      return {
        ...(toRefs(data) as any),
        skuListvisible,
        open,
        search,
        reset,
        handleOk,
        handleCancel,
        selectColumn,
        changePage,
        sizeChange,
        cateGoryChange,
        table,
      }
    },
  })
</script>

<style lang="less" scoped>
  .table-two {
    // height: 56px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
  }
</style>
